Floating Action Button (fab)爲google推行一致使用體驗的Material Design其中一員
簡單的看一下怎麼實現吧

新增

首先在layout design收尋floating就會看到fab,拖動到layout中
會出現一個視窗表示要給這個fab圖示

按左上的+選Vector,新增一個"+"的圖示

有提示需要mateial的library,按確認後
到gradle:app就可以看到dependencies中
已加入implementation 'com.google.android.material:material:1.2.0'

在layout屬性有error提示

二種方式可處理
1.可以在gradle:app加上android.defaultConfig.vectorDrawables.useSupportLibrary = true

2.將fab在xml中的屬性app:srcCompat改爲android:src

到這邊就可以run,看到fab在畫面上了

程式部分

fab的點選動作跟button一樣
我們到程式裡面寫一個Listener

fab.setOnClickListener {
            Toast.makeText(this, "fab clicked", Toast.LENGTH_SHORT).show()
        }

多層

也可以做成多層選單,例如除了本身的點擊事件
加入長按之後,叫出第二個fab作其它動作

先在layout用LinearLayout裝二個fab

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="32dp"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:contentDescription="submit"
            android:src="@drawable/ic_delete"
            app:fabSize="mini"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="8dp"
            android:clickable="true"
            android:src="@drawable/ic_baseline_add_24"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </LinearLayout>

接着到程式部分寫控制邏輯
先把fab2隱藏,fab2.hide()
設定一個boolean做開關,private var isMenuOpen = false
當fab menu是開的時候,長按fab就會關閉
若fab menu是關的時候,長按fab就會開啓

class MainActivity : AppCompatActivity() {

    private var isMenuOpen = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        fab2.hide()

        fab.setOnClickListener {
            Toast.makeText(this, "fab clicked", Toast.LENGTH_SHORT).show()
            if (isMenuOpen) closeFabMenu()
        }

        fab.setOnLongClickListener {
            when (isMenuOpen) {
                false -> {
                    openFabMenu()
                }
                else -> {
                    closeFabMenu()
                }
            }
            return@setOnLongClickListener true
        }

        fab2.setOnClickListener {
            Toast.makeText(this, "second fab", Toast.LENGTH_SHORT).show()
        }
    }

    private fun openFabMenu() {
        isMenuOpen = true
        fab2.show()
    }

    private fun closeFabMenu() {
        isMenuOpen = false
        fab2.hide()
    }
}